import React, { useContext } from 'react';
import { Select, Form, Card, Input } from 'antd';
import PubSub from 'pubsub-js';
import useEditorAPI from '../EditorToolbar/useEditorAPI';
import FlowContext from '../../FlowContext';

const { Option } = Select;

const TYPES = [
  {
    title: '校验成功',
    value: 'VALIDATE_SUCCESS',
  },
  {
    title: '校验失败',
    value: 'VALIDATE_FAILURE',
  },
];

function ForEdge({ edge, source, target, form }) {
  const { getFieldDecorator } = form;
  const { branch } = edge;

  const { update } = useEditorAPI();

  const {
    state: { processId, versionId },
  } = useContext(FlowContext);

  const handleBranchChange = branch => {
    update({ branch });
    PubSub.publish(`nodeSave_${processId}_${versionId}`);
  };

  // 校验分支
  if (source && source.nodeType === 'Validation') {
    if (!branch) {
      handleBranchChange('VALIDATE_SUCCESS');
    }

    return (
      <Card type="inner" size="small" title="分支选择" bordered={false}>
        <Form className="flow">
          <Form.Item label="结果分支">
            {getFieldDecorator('branch', {
              initialValue: branch || 'VALIDATE_SUCCESS',
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Select placeholder="--请选择--" onChange={handleBranchChange}>
                {TYPES.map(item => {
                  return <Option key={item.value}>{item.title}</Option>;
                })}
              </Select>
            )}
          </Form.Item>
        </Form>
      </Card>
    );
  }

  // 互斥网关分支
  if (source && (source.nodeType === 'ExclusiveGateway' || source.nodeType === 'Invocation')) {
    return (
      <Card type="inner" size="small" title="分支选择" bordered={false}>
        <Form className="flow">
          <Form.Item label="结果分支">
            {getFieldDecorator('branch', {
              initialValue: branch,
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Input
                onChange={e => handleBranchChange(e.target.value)}
                placeholder="请输入分支名，如：VALIDATE_SUCCESS"
              />
            )}
          </Form.Item>
        </Form>
      </Card>
    );
  }

  // HTTP调用分支
  if (source && source.nodeType === 'HttpCall') {
    if (!branch) {
      handleBranchChange('CALL_SUCCESS');
    }

    return (
      <Card type="inner" size="small" title="分支选择" bordered={false}>
        <Form className="flow">
          <Form.Item label="结果分支">
            {getFieldDecorator('branch', {
              initialValue: branch || 'CALL_SUCCESS',
              rules: [
                {
                  required: true,
                },
              ],
            })(
              <Select placeholder="--请选择--" onChange={handleBranchChange}>
                <Option key="CALL_SUCCESS" value="CALL_SUCCESS">
                  服务器正常响应(2xx)
                </Option>
                <Option key="CALL_TIMEOUT" value="CALL_TIMEOUT">
                  服务器未响应(调用超时/连接失败)
                </Option>
                <Option key="CALL_ERROR" value="CALL_ERROR">
                  服务器异常响应(4xx/5xx)
                </Option>
              </Select>
            )}
          </Form.Item>
        </Form>
      </Card>
    );
  }

  return null;
}

export default Form.create()(ForEdge);
